<template>
	<!-- 搜索  focused-->
	<view class="search" :class="{'focused':key}">
		<!-- 搜索框 -->
		<view class="input-wrap">

			<input type="text" @focus="search" :placeholder="place" v-model="value1" @input="input" @confirm="confirm">

			<button v-show="showTime" class="btn" @click="confirm">搜索</button>
		</view>

		<!-- 搜索结果 -->
		<view class="content">

			<view class="title">最近搜索<span class="clear" @click="remove"></span></view>
			<view class="history">
				<navigator :url="'/pages/login/login?query='+item" :key="index" v-for="(item,index) in history">
					{{item}}
				</navigator>
			</view>
			<!-- 搜索建议的结果 -->
			<scroll-view scroll-y class="result" v-if="show">
				<navigator :url="'/pages/login/login?goods_id='+item.goods_id" v-for="item in list" key="item.goods_id">
					{{item.goods_name}}
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				key: false,
				show: false,
				showTime: false,
				place: '',
				value1: '',
				timer: null,
				show: false,
				history: uni.getStorageSync("search") || []
			}
		},
		created() {
			this.search()
		},
		methods: {
			//点击删除历史记录
			remove() {
				console.log(2);
				uni.removeStorageSync("search")
				this.history = []
			},
			// 点击键盘的发送
			confirm() {
				// 记录在本地
				//    1、数据格式：数组
				let arr = uni.getStorageSync("search") || []
				arr.push(this.value1)
				arr = [...new Set(arr)]
				//    2、存
				uni.setStorageSync("search", arr)
				this.history = arr
				// 调用 API 实现页面的跳转,带着刚才搜索的参数
				uni.showModal({
					title: '提示',
					content: '没有list页面，暂时用login,',
					success: async (res) => {

						if (res.confirm) {
							wx.navigateTo({
								url: '/pages/login/login'
							});
						}

					}
				})



			},
			// async input() {
			// 	if (this.value1.trim() === '') {
			// 		return this.show = false
			// 	}
			// 	this.show = true
			// 	if (this.timer) {
			// 		clearTimeout(this.timer);
			// 	}
			// 	this.timer = setTimeout(async () => {

			// 		const {
			// 			message
			// 		} = await this.$request({
			// 			url: "/goods/qsearch",
			// 			data: {
			// 				query: this.value1
			// 			}
			// 		});
			// 		this.list = message;

			// 	}, 1000);
			// },
			search() {
				this.key = true
				this.place = '请输入您想搜索的商品'
				// uni.hideTabBar()
				this.showTime = true
			},
			cancel() {
				this.key = false
				this.place = ''
				this.value1 = ''
				this.list = []
				// uni.showTabBar()
				this.showTime = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.btn {
		background-color: #fa2209;
		color: #fff;
		line-height: ;
		font-size: 30rpx;
		line-height: 60rpx;
		margin-left: 10rpx;
	}

	.search {
		display: flex;
		flex-direction: column;

		// 搜索框
		.input-wrap {
			display: flex;
			height: 100rpx;
			padding: 20rpx 30rpx;
			// background-color: #ea4451;
			box-sizing: border-box;
			position: relative;

			&::before,
			&::after {
				height: 44rpx;
				line-height: 1;
				background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
				background-size: 32rpx;
				background-position: 6rpx center;
				background-repeat: no-repeat;

				position: absolute;
				top: 28rpx;
				z-index: 9;
			}

			&::before {
				content: '搜索';
				display: block;

				width: 100rpx;
				padding: 11rpx 0 10rpx 44rpx;
				box-sizing: border-box;
				color: #666;
				font-size: 24rpx;
				left: 325rpx;
			}

			&::after {
				display: none;
				content: '';
				width: 44rpx;
				left: 40rpx;
			}

			input {
				flex: 1;
				height: 60rpx;
				padding: 0 20rpx 0 64rpx;
				background-color: #fff;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666;
			}

			span.cancle {
				display: none;
				width: 80rpx;
				text-align: right;
				line-height: 60rpx;
				font-size: 27rpx;
				color: #666;
				margin-bottom: 20rpx;
			}
		}

		// 搜索结果
		.content {
			display: none;
			flex: 1;
			padding: 27rpx;
			background-color: #fff;
			position: relative;

			.title {
				font-size: 27rpx;
				line-height: 1;
				color: #333;
			}

			.clear {
				display: block;
				width: 27rpx;
				height: 27rpx;
				float: right;
				background-image: url(http://static.botue.com/ugo/images/clear.png);
				background-size: cover;
			}

			.history {
				padding-top: 30rpx;

				navigator {
					display: inline-block;
					line-height: 1;
					padding: 15rpx 20rpx 12rpx;
					background-color: #ddd;
					font-size: 24rpx;
					margin-right: 20rpx;
					margin-bottom: 15rpx;
					color: #333;
				}
			}

			.result {
				// display: none;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-color: #fff;

				navigator {
					line-height: 1;
					padding: 20rpx 30rpx;
					font-size: 24rpx;
					color: #666;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		// 获得焦点状态
		&.focused {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9;

			.input-wrap {
				background-color: #eee;

				&::before {
					display: none;
				}

				&::after {
					display: block;
				}
			}

			span.cancle {
				display: block;
			}

			.content {
				display: block;
			}
		}
	}
</style>